<!--  -->
<template>
    <el-dialog title="批量开卡" :visible.sync="value" width="55%" :before-close="handleClose" top="0" :close-on-click-modal="false">
        <el-form ref="editForm" :model="postForm" :rules="rules" label-width="120px">
                <el-form-item label="卡号前缀" prop="prefix">
                    <el-input v-model="postForm.prefix"></el-input>
                </el-form-item>
                <el-form-item label="自动补长度" prop="len">
                    <el-input v-model="postForm.len"></el-input>
                </el-form-item>
                <el-form-item label="起始卡号" prop="start">
                    <el-input type="number" v-model="postForm.start" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="结束卡号" prop="end">
                    <el-input type="number" v-model="postForm.end" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="持卡人" prop="name">
                    <el-input v-model="postForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="postForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="初始充值金额" prop="money">
                    <el-input v-model="postForm.money" type="number"></el-input>
                </el-form-item>    
                <el-form-item label="备注">
                    <el-input v-model="postForm.remark" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </template>
    </el-dialog>
</template>


<script>
export default {
  name: "batchAdd",
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      postForm: {
        start: 0,
        end: 0,
        len:0,
        prefix: "",
        name: "",
        mobile: "",
        money: 0,
        remark: "",
      },
      rules: {
        prefix: [
          { required: true, message: "请输入卡号前缀", trigger: "blur" },
        ],
        len: [
          { required: true, message: "请输入自动计算卡号长度", trigger: "blur" },
        ],
        start: [{ required: true, message: "请输入起始卡号", trigger: "blur" }],
        end: [{ required: true, message: "请输入结束卡号", trigger: "blur" }],
        name: [{ required: true, message: "请输入持卡人", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        money: [{ required: true, message: "请输入初始金额", trigger: "blur" }],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleClose() {
      this.$emit("input", false);
    },
    onSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: "/api/member-cards/batchAdd",
            method: "post",
            data: this.postForm,
          }).then((ret) => {
            console.log(ret)
            if (ret.status === 200 || ret.status === 201) {
              this.$message(ret.data);
              this.$emit("input", false);
            } else {
              this.$message({ type: "error", message: ret.message });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
</style>